$(document).ready(function() {
    if (!createjs.Sound.initializeDefaultPlugins()) {
        return;
    }
    createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin]);
    createjs.Sound.alternateExtensions = ["mp3"];

    var id = $('#data-id').val();
    var current = $('#current').val();
    getQuestions(id, current);
    openWS();

});

var count = 0;

function getQuestions(id, position) {
    var baseUrl = $('#base-url').attr('href');
    $.ajax({
        url: baseUrl + '/student/getQuestions/' + id + '/' + position,
        success: function(data) {
            $('#question-block').html('');
            $('#question-audio').html('');
            $('#question-doc').html('');
            $('#btn-block').html('');
            if (data) {
                var questions = JSON.parse(data);
                for (var i in questions.questions) {
                    var question = '<div class="question-number">Câu ' + questions.questions[i].testPosition + ':</div>';
                    question += '<div><input name="answer[]" type="radio" >A:' + questions.questions[i].a + '</div>';
                    question += '<div><input name="answer[]" type="radio" >A:' + questions.questions[i].b + '</div>';
                    question += '<div><input name="answer[]" type="radio" >A:' + questions.questions[i].c + '</div>';
                    question += '<div><input name="answer[]" type="radio" >A:' + questions.questions[i].d + '</div>';
                    $('#question-block').append(question);
                }
                if (questions.audio) {
                    var url = questions.audio.url;
                    createjs.Sound.registerSound(url, questions.audio.id);
                    var btn = '<button class="btn" id="listen" onclick="playSound()"><i class="fa fa-music"></i></button>'
                    $('#question-audio').html(btn);

                    setTimeout(function() {
                        playSound(questions.audio.id);
                    }, 500);
                }
                if (questions.image) {
                    var url = questions.image.url;
                    var img = '<img class="question-img" src="' + url + '"/>';
                    $('#question-img').html(img);
                }
                if (questions.document) {
                    var content = questions.document.content;
                    $('#question-doc').html(content);
                }

                if (questions.pre > 0) {
                    var pre = '<button class="btn" onclick="changeQuestions(true)"><i class="fa fa-arrow-left"></i></button>';
                    $('#btn-block').append(pre);
                }

                if (questions.next <= questions.total) {
                    var next = '<button class="btn" onclick="changeQuestions(false)"><i class="fa fa-arrow-right"></i></button>';
                    $('#btn-block').append(next);
                }

                $('#pre').val(questions.pre);
                $('#next').val(questions.next);
            }
        }
    });
}

function changeQuestions(back) {
    var position = $('#next').val();
    if (back) {
        position = $('#pre').val();
    }
    var id = $('#data-id').val();
    getQuestions(id, position);

    var json = {
        type: 'changeQuestion',
        position: position
    };
    sendWS(json);
}

function changeQuestion(position) {
    var id = $('#data-id').val();
    getQuestions(id, position);
}

function playSound(id) {
    $('#listen').attr('disabled', true);
    var instance = createjs.Sound.play(id);
    count++;
    instance.addEventListener("complete", function() {
        $('#listen').attr('disabled', false);
        changeQuestions(false);
    });
}